<template>
  <div class="huiyuanjingji">
    <div
      class="samlldiv"
      :class="[activenum ? 'animate__animated  animate__fadeInDown' : '']"
      v-if="active"
    >
      <Hyjjtop />
    </div>
    <div class="samlldiv animate__animated animate__fadeInUp" v-else>
      <Hyjjdialogbottom />
    </div>

    <div
      v-if="active"
      class="bottonshuzipopupdown"
      @click="qiehuan(0)"
      id="shuzijiaoyipopupbottomdown"
    >
      <img
        src="../assets/shuzijiaoyipopupbottomdown.png"
        style="width: 1.5rem; height: 1.2rem"
      />
    </div>
    <div
      v-else
      class="bottonshuzipopuptop"
      @click="qiehuan(1)"
      id="shuzijiaoyipopupbottomup"
    >
      <img
        src="../assets/shuzijiaoyipopupbottomup.png"
        style="width: 1.5rem; height: 1.2rem"
      />
    </div>
  </div>
</template>

<script>
import Hyjjtop from "@/components/hyjjtop.vue";
import Hyjjdialogbottom from "@/components/hyjjdialogbottom.vue";
export default {
  name: "hyjjsecongpopup",
  components: {
    Hyjjtop,
    Hyjjdialogbottom,
  },
  props: {},
  data() {
    return {
      active: true,
      activenum: 0,
    };
  },

  mounted() {},
  methods: {
    qiehuan(index) {
      this.activenum++;
      if (index == 0) {
        this.active = false; 
        this.$store.state.imgurlsel = require("@/assets/imgs/yellowdownsanjiao.png");
      } else {
        this.active = true;
        this.$store.state.imgurlsel = require("@/assets/imgs/blacksanjiao.png");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.huiyuanjingji {
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  position: relative;
  scroll-behavior: smooth;
  // overflow: hidden;
  font-size: 1rem;

  .samlldiv {
    width: 100%;
    height: calc(100% - 2.3rem);
    box-sizing: border-box;
    .viptopleft {
      height: 80%;
      background-color: #182c56;
      width: 44%;
      border-radius: 5rem;
      position: absolute;
      top: 15%;
      left: 0;
      z-index: 2;
      box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;
      .vipgridhrright {
        height: 1px;
        background: #182c56;
      }
      .vipgridhr {
        height: 1px;
        background: #dfe7f4;
      }
    }

    .viptopleft > div {
      text-align: center;
      color: #dfe7f4;
      margin-top: 1%;
    }

    .viptopright {
      height: 80%;
      border: 1px solid;
      background-color: #dfe7f4;
      width: 66%;
      border-radius: 80px;
      position: absolute;
      top: 15%;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-left: 10%;
      box-sizing: border-box;
    }

    .viptopright > div {
      text-align: center;
      color: #182c56;
      margin-top: 1%;
    }
    .vipmiddlearea {
      display: grid;
      grid-template-columns: 78% 22%;
      height: 35%;
    }

    .vipareaservefirst {
      border-top: 2px solid;
      background-color: #dfe7f4;
    }

    .vipareaservesecond {
      border-bottom: 2px solid;
      border-top: 1px solid;
      background-color: #dfe7f4;
    }

    .vippersonservesecond {
      border-bottom: 2px solid;
      background-color: #dfe7f4;
    }

    .normaltr {
      border-bottom: 1px solid black;
      color: #0000ff;
    }
    .hyjjtabletext {
      background-color: #dfe7f4;
      color: #0000ff;
    }
    .hyjjtabletextcolor {
      color: #0000ff;
    }
  }
  .hyjjdowmdiv1 {
    width: 101%;
    margin: 0 auto;
    height: 47%;
    position: relative;
    box-sizing: border-box;
    background-image: url("../assets/hyjjtopbg.png");
    background-size: 101% 100%;
    background-repeat: no-repeat;
    /* border: 1px solid #b8c0d0;
    box-shadow: rgba(169, 183, 201,.3) -1px 1px 4px 5px;   */
    padding: 2%;
    margin-left: -1%;
  }
  .fuftjtopten {
    height: 84%;
    width: 100%;
    position: relative;
  }
  .fuftjtoptendw {
    position: absolute;
    bottom: 10%;
    left: 2%;
    font-size: 0.6rem;
  }
  .glxgysfwftj {
    height: 49%;
    display: flex;
    justify-content: space-between;
    .glxgysfwftjtitle {
      width: 37%;
      height: 100%;
      padding: 1%;
      box-sizing: border-box;
      .glxgysfwftjcontenttext {
        flex: 1;
        position: relative;
        width: 100%;
        height: 90%;
        .glxgysfwftjcontenttextsmalldiv {
          width: 25%;
          height: 26%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 13;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .fwfyphtopten {
    width: 60%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .fwfyphtoptencontent {
      display: flex;
      height: 90%;
      justify-content: space-between;
      .fwfyphtoptencontenttable {
        width: 48%;
        height: 100%;
        padding-top: 3%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .table1 {
          border-collapse: collapse;
          height: 100%;
          text-align: center;
          width: 100%;
          border-bottom: 2px solid #182c56;
          #qianwupaiming {
            color: #182c56;
            text-align: left;
            tr {
              border-bottom: 1px solid rgba(24, 44, 86, 0.3);
              .bottomyincangtitle {
                background-color: #e4eef9;
                width: 60%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 2%;
              }
            }
          }
          #houwupaiming {
            color: #182c56;
            text-align: left;
            tr {
              border-bottom: 1px solid rgba(24, 44, 86, 0.3);
              .bottomyincangtitle {
                background-color: #e4eef9;
                width: 60%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 2%;
              }
            }
          }
        }
      }
    }
  }
}
.bottonshuzipopupdown {
  height: 1.2rem;
  position: absolute;
  bottom: 0%;
  width: 90%;
  padding: 0.5%;
  background-image: url("../assets/shuzijiaoyibottombg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}
.bottonshuzipopuptop {
  position: absolute;
  bottom: 0%;
  width: 90%;
  padding: 0.5%;
  z-index: 2147483647 !important;
  background-image: url("../assets/shuzijiaoyibottombg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}

.mainbigtopdiv2 {
  width: 99%;
  height: 20%;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 0.05rem solid #192c55;
  border-radius: 0.25rem;
  margin-top: 3%;
}
#vipareabottomechartsdiv {
  width: 100%;
  height: 100%;
  padding-top: 2%;
  box-sizing: border-box;
}
.bottomyincangtitle {
  background-color: #e4eef9;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 2%;
}
.middletable {
  width: 60%;
  height: 100%;
  background-color: #e4eef9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
</style>